<template>
  <div class="card" style="background-color: aquamarine;">
    <div class="row">

      <div class="col" style="color:black;font-weight: bolder;font-size: larger;">
        My购物车
      </div>

    </div>
  </div>

  <!-- <div class="card" style="background-color: aquamarine;">
      <div class="row">
          <div class="col">
              <button   @click="buyproduct" class="btn btn-primary">一键购买</button>
          </div>
          <div class="col">
              <button   @click="removefromcart" class="btn btn-primary">一键清空</button>
          </div>
      </div>
  </div> -->

  <!-- <div class="card"> -->
  <div style="margin-top: 30px;width: 1280px;margin-left: 46px;" class="card">
    <div class="cardbody">
      <div style="margin-right: 10px;" class="fl" v-for="sp in $store.state.shopcarts" :key="sp.id">
        <div class="tupian" style="width:300px;">
          <img @click="gotodetails(sp.id)" style="width:250px;height:300px;" :src="sp.photo">
          <div class="shadow">{{ sp.description }}</div>
          <div class="shadow" style="color:red">价格：￥{{ sp.price }}</div>
          <div class="shadow">商品名：{{ sp.productname }}</div>
          <div class="card">
            <div class="body shadow">
              <div>库存：{{ sp.inventory }}</div>
            </div>
          </div>

          <div class="card">
            <div class="body shadow mid"><button style="width:100%" @click="removefromshopcart(sp.id)" type="submit"
                class="btn btn-primary">移出购物车</button></div>
          </div>



        </div>
      </div>
    </div>

  </div>

  <!-- </div> -->
</template>
  
<script>
//import {ref} from 'vue';
import { useStore } from 'vuex';
import router from '@/router/index'
// import router from '@/router/index';
export default {
  name: 'ShoppingCar',
  components: {
  },
  setup() {
    //let store=useStore();
    // let buy=ref([]);
    // let remove=ref([]);
    let store = useStore();

    // for(let i in store.state.shopcarts){
    //   buy.value[store.state.shopcarts[i].id]=false;
    //   remove.value[store.state.shopcarts[i].id]=false;
    // }

    // let shopid=ref(0);
    //   const buyproduct=()=>{
    //         store.commit("update_priceTozero");
    //         for(let i in store.state.shopcarts)
    //         {
    //             if(buy.value[store.state.shopcarts[i].id]===true){
    //             let date=new Date();
    //             store.dispatch("getshopidByproductid",{
    //               productid:store.state.shopcarts[i].id,
    //               success(resp){
    //                       shopid.value=parseInt(resp.shopid);
    //               }
    //             })


    //             let data={
    //             productname:store.state.shopcarts[i].productname,
    //             shopid:shopid.value,
    //             userid:store.state.id,
    //             order_price:store.state.shopcarts[i].price,
    //             order_create:date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒",
    //           };
    //           store.dispatch("create_order",data);

    //           store.dispatch("inventoryminus",{
    //             id:store.state.shopcarts[i].id,
    //           })
    //         }    
    //   }
    //   // router.push({name:'order'});
    // }

    const removefromshopcart = (productid) => {
      // for(let i in store.state.shopcarts)
      //     {
      //             store.dispatch("deleteshopcart",store.state.shopcarts[i].id);
      //         }

      store.dispatch("deleteshopcart", productid);

    }
    const gotodetails = (productid) => {
      router.push({ name: 'product_details', params: { id: productid } });
    };

    //  const gotoshop=()=>{
    //             router.push({name:'shop_products',params:{id:shopid.value}});
    //         }

    return { removefromshopcart, gotodetails };
  }
};
</script>
  
<style scoped>
.col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show {
  display: flex;
}

.fl {
  float: left;
}

/* .sc{
    width:75px;
    height:25px;
  } */
.tupian:hover {
  transform: scale(1.05);
}

.shadow {
  font-weight: lighter;
  text-align: center;
}

.mid {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 50%;
  background-color: lightgreen;
  border-color: orange;
}</style>
  